<template>
    <div class="frame">
        <div class="animated bounceIn animated-delay right-append-menu">
            <div class="ps-dialog-head">
                <div class="ps-dialog-title">
                    <p>图标管理</p>
                </div>
                <span class="ps-dialog-close close" @click="ClosePop"></span>
            </div>
            <div class="ps-dialog-body">
                <div class="ps-dialog-body--broad">
                    <div class="block_manner">
                        <el-scrollbar style="width: 100%; height: 100%">
                            <ul class="list">
                                <li v-for="(item, i) in globalCountrySetting" :key="i" @click="bindchangeCountry(item)"
                                    :class="nowCountry.id == item.id ? 'activeNow' : ''">
                                    {{ item.name }}
                                </li>
                            </ul>
                        </el-scrollbar>
                    </div>

                    <div class="block_manner">
                        <div class="emotion_cat">
                            <Tabs v-model="tabsVal" @on-click="switchTabsIcon">
                                <TabPane v-for="(a, s) in tabslist" :key="s + '1'" :label="a.label" :name="a.id"
                                    style="height: calc(100% - 36px)">
                                    <div class="emotion_pub" v-if="tabsVal !== '3'">
                                        <div v-for="(item, i) in a.children" :key="i"
                                            @click="selectBoom(item.roudicon)">
                                            <el-badge value="now" class="item"
                                                :hidden="item.roudicon == currentIcon ? false : true">
                                                <svg class="icon" aria-hidden="true"
                                                    style="cursor: pointer; width: 100%; height: 100%">
                                                    <use :xlink:href="'#' + item.roudicon"></use>
                                                </svg>
                                            </el-badge>
                                        </div>
                                    </div>
                                    <div v-else v-for="(item, i) in a.children" :key="i + '1'">
                                        <svg class="icon" aria-hidden="true"
                                            style="cursor: pointer; width: 100%; height: 100%">
                                            <use :xlink:href="'#' + item.roudicon"></use>
                                        </svg>
                                    </div>
                                </TabPane>
                            </Tabs>
                        </div>
                        <div class="emotion_btn">
                            <el-button type="warning" size="mini" @click="resetting"
                                :disabled="nowCountry.isChange?false:true">重置
                            </el-button>
                            <el-button type="primary" size="mini" @click="queryBtn"
                                :disabled="currentIcon==''?true:false">确定
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ps-dialog-foot"></div>
        </div>
    </div>
</template>

<script>
    import "../../../../globle/js/animate/animate.min.css";
    import {
        showLoading,
        hideLoading
    } from '../../../server/loading.js'
    import {
        mapGetters,
        mapMutations
    } from "vuex";
    export default {
        // name: 'base',
        data() {
            return {
                nowCountry: {
                    id: "",
                    name: "",
                    isChange: false,
                },

                textarea: "",
                district: "",
                pagerInfo: {},
                tabsVal: '3',
                tabslist: [],
                defaultIcon: {},
                currentIcon: "", //当前选择 的图标
            };
        },
        computed: {
            ...mapGetters(["globalCountrySetting", "bottomModeMapView"]),
        },
        mounted() {
            this.getIconSetting();
        },
        filters: {
            formval(arr) {
                for (let a of arr) {
                    if (a.name === '名称') {
                        return a.value;
                    }
                }
            }
        },
        methods: {
            ...mapMutations(["changeCountry", "OPENWindowBase"]),
            //获取图标配置
            getIconSetting() {
                this.nowCountry.id = this.globalCountrySetting[0].id;
                this.nowCountry.name = this.globalCountrySetting[0].name;
                this.nowCountry.isChange = this.globalCountrySetting[0].isChange;

                $.getJSON("../../../public/iconPopInfo/list.json").then((res) => {
                    console.log(res);
                    // let arr=JSON.parse(res).list;//打包
                    let arr = res.list;
                    for (let t in arr) {
                        let obj = {};
                        if (t == 2) {
                            obj.name = arr[t].type;
                            obj.label = arr[t].type;
                            obj.id = arr[t].id;
                            obj.isChange = this.globalCountrySetting[0].isChange;
                            obj.type = arr[t].type;
                            obj.children = arr[t].children;
                            obj.children[0] = {};
                            obj.children[0].iconName = this.globalCountrySetting[0].iconName;
                            obj.children[0].roudicon = this.globalCountrySetting[0].roudicon;
                            obj.children[0].name = this.globalCountrySetting[0].name;
                            obj.defaultRoudicon = this.globalCountrySetting[0].defaultRoudicon;
                            this.tabslist.push(obj);
                            // console.log(this.tabslist);
                        } else {
                            obj.name = arr[t].id;
                            obj.label = arr[t].type;
                            obj.type = arr[t].type;
                            obj.children = arr[t].children;
                            this.tabslist.push(obj);
                        }
                    }
                });
            },
            //关闭tag
            closeTag(tag) {
                // console.log(tag);
                if (this.bottomModeMapView.checkedIDlist.indexOf(tag.id) > -1) {
                    this.deleteBaseChecked(this.bottomModeMapView.checkedIDlist.indexOf(tag.id))
                    this.$refs['multipleTable'].toggleRowSelection(tag);
                }
            },
            //国家改变值
            bindchangeCountry(item) {
                console.log(item);
                this.nowCountry.id = item.id;
                this.nowCountry.name = item.name;
                this.nowCountry.isChange = item.isChange;
                let obj = this.tabslist[2];
                obj.isChange = item.isChange;
                obj.children[0].iconName = item.iconName;
                obj.children[0].roudicon = item.roudicon;
                obj.children[0].name = item.name;
                obj.defaultRoudicon = item.defaultRoudicon;
                this.tabslist[2] = obj;
            },
            /* 按钮事件 start */
            //关闭弹框
            ClosePop() {
                this.OPENWindowBase(false);
            },
            selectBoom(iName) {
                this.currentIcon = iName;
            },
            //确定替换
            queryBtn() {
                let index = this.nowCountry.id.slice(1, this.nowCountry.id.length) - 1;
                this.globalCountrySetting[index].roudicon = this.currentIcon;
                this.globalCountrySetting[index].isChange = true;
                this.changeCountry(this.globalCountrySetting); //修改store 中的国家列表设置
                this.tabslist[2].isChange = this.globalCountrySetting[index].isChange;
                this.nowCountry.isChange = this.globalCountrySetting[index].isChange;
                this.tabslist[2].children[0].roudicon = this.globalCountrySetting[index].roudicon;
                this.tabsVal = '3';
                // this.$emit("replaceIcon", this.currentIcon, this.IconseTting);
            },
            //重置默认
            resetting() {
                let index = this.nowCountry.id.slice(1, this.nowCountry.id.length) - 1;
                this.globalCountrySetting[index].roudicon = this.globalCountrySetting[index].defaultRoudicon;
                this.globalCountrySetting[index].isChange = false;
                this.changeCountry(this.globalCountrySetting); //修改store 中的国家列表设置
                this.tabslist[2].isChange = this.globalCountrySetting[index].isChange;
                this.nowCountry.isChange = this.globalCountrySetting[index].isChange;
                this.tabslist[2].children[0].roudicon = this.globalCountrySetting[index].roudicon;
                this.tabsVal = '3';
                // this.$emit("replaceIcon", this.defaultIcon.roudicon, this.IconseTting);
            },
            /* 按钮事件 end */
            /* 数据事件 start */
            //切换tabs 判断
            switchTabsIcon(id) {
                console.log(id);
                console.log(Number(id - 1));
            },
            //获取图标数据
            getChangeStatics() {},
            /* 数据事件 end */
        },
    };
</script>

<style lang="less" scoped>
    @import url("../styles/IconfontPop.less");


    .emotion_cat {
        width: 100%;
        height: calc(100% - 40px);
        background-color: @white;
    }

    .emotion_pub {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-content: space-around;

        div {
            width: 25%;
            height: 50px;
            text-align: center;
            padding: 5px 0;
        }
    }

    .emotion_btn {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 10px;
    }

    .ivu-tabs {
        height: 100%;
    }
</style>